<template>
  <el-breadcrumb class="nav" separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <el-dropdown>
        新建<el-icon><ArrowDown /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item>Action 4</el-dropdown-item>
            <el-dropdown-item>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-breadcrumb-item>
    <el-breadcrumb-item>外语</el-breadcrumb-item>
    <el-breadcrumb-item>英语</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
//  separator=">" :separator-icon="ArrowRight"
import { ArrowRight } from '@element-plus/icons-vue'

export default {
  name: 'nav',
  props: [],
  components: {
    ArrowRight,
  },
  data() {
    return {}
  },
}
</script>

<style scoped lang="scss">
.nav {
  margin-bottom: 20px;
}
</style>
